<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
          margin: 0;
          padding: 0;
        }
        ul{
          list-style-type: none;
        }
        .box{
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
            margin: 100px auto;
            overflow: hidden;
        }
        .hd{
          height: 45px;
        }
        .hd span{
          display: inline-block;
          width: 90px;
          background-color: pink;
          line-height: 45px;
          text-align: center;
          cursor: pointer;

        }
        .hd span.current {
            background-color: purple;
        }
        .bd li {
            height: 255px;
            background-color: purple;
            display: none;
        }
        .bd li.current {
            display: block;
        }
    </style>
</head>
<body>
  <div class="box" id="one">
    <div class="hd">
        <span class="current">体育</span>
        <span>娱乐</span>
        <span>新闻</span>
        <span>综合</span>
    </div>
    <div class="bd">
        <ul>
            <li class="current">我是体育模块</li>
            <li>我是娱乐模块</li>
            <li>我是新闻模块</li>
            <li>我是综合模块</li>
        </ul>
    </div>
</div>
</body>
</html>
<script>
 function tab(id) {  
    var eleId = document.getElementById(id);  // 获取id元素
 var spans = eleId.getElementsByTagName("span");  //  span 4个小span
         var lis = eleId.getElementsByTagName("li");  //  4个小li
         for(let v=0;i<spans.length;i++){
           spans[i].index=i;
           spans[i].onclick=function(){
             for(let j=0;j<spans.length;j++){
               spans[j].className='';
               lis[j].className=''
             }
             this.className='current';
             // 留下当前的那个li 显示出来
             lis[this.index].className = "current";
           }
         }

  }
  tab("one");   // 实参
</script>